<template>
  <div class="login">
    <div class="title">面经注册</div>
    <div class="username">
      用户名<input type="text" placeholder="用户名" v-model="username" />
    </div>
    <div class="password">
      密码<input type="password" placeholder="密码" v-model="password" />
    </div>
    <van-button type="primary" block color="#07c160" @click="register"
      >注册</van-button
    >
    <div class="change">
      <a href="#" @click="$router.push({ path: '/login' })">有账号，去登录</a>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    async register() {
      if (!/^[a-zA-Z0-9]{6,12}$/.test(this.username)) {
        alert("账号长度不符合规则");
        return;
      }
      if (!/^[a-zA-Z0-9]{6,12}$/.test(this.password)) {
        alert("密码长度不符合规则");
        return;
      }

      if (this.username.trim() == "") {
        alert("请输入账号或密码");
        return;
      }
      if (this.password.trim() == "") {
        alert("请输入密码");
        return;
      }
      const res = await axios.post(
        "http://interview-api-t.itheima.net/h5/user/register",
        {
          username: this.username,
          password: this.password,
        }
      );
      console.log(res);
      if (res.status !== 200) {
        alert("注册失败");
        return;
      }
      this.$router.push({
        path: "/login",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;

  .title {
    width: 100%;
    text-align: center;
    line-height: 46px;
  }
  .username,
  .password {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: left;
    flex: 1;
    input {
      border: none;
      outline: none;
    }
  }
  .change {
    width: 100%;
    text-align: right;
    line-height: 46px;
  }
}
</style>
